<template>
  <Row :gutter="[0, 10]">
    <template v-for="item in form" :key="item.id">
      <Col :span="24">
        <InputNumber v-model:value="item.value" :min="0">
          <template #addonAfter>
            {{ item.unit_name }}
          </template>
        </InputNumber>
      </Col>
    </template>
    <Col :span="24">
      最小规格数量：
      <span class="total">{{ minSpecQuantity }}</span>
      {{ specs.find((item) => item.unit_type === GOODS_UNIT_TYPE.SMALL.value)?.unit_name }}
    </Col>
  </Row>
</template>
<script lang="ts" setup>
import { Row, Col, InputNumber } from 'ant-design-vue'
import { useTransformSpec } from '@/hooks/web/use-transform-spec'
import { GOODS_UNIT_TYPE } from '@/constants/business/goods-const'
const { getMinSpecQuantity } = useTransformSpec()
interface CustomProps {
  specs: any[]
  quantity: number
  result: number
}
const props = defineProps<CustomProps>()
const emits = defineEmits(['update:result'])

const form = ref(props.specs.map((item) => ({ ...item, value: null })))
const minSpecQuantity = computed(() => {
  return form.value.reduce((min, item) => {
    return min + getMinSpecQuantity(item.value, item.conversion_rate)
  }, 0)
})
watch(
  () => minSpecQuantity.value,
  (val) => {
    emits('update:result', val)
  },
  {
    immediate: true
  }
)
</script>

<style lang="less" scoped>
.total {
  font-size: 1.25em;
  font-weight: bold;
  color: @primary-color;
}
.submit {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>
